<template>
    <li>
        <div class="image">
            <img src="@/assets/images/web.png" alt="">
        </div>
        <div class="desc">
            <p>PC端 + 移动端网站布局和特效</p>
            <p>中级 90人报名</p>
            <p>￥999990</p>
        </div>
    </li>
</template>

<script setup>

</script>

<style lang="scss" scoped>
li {
    width: 270px;
    height: 275px;
    // background-color: #bfc;
    box-shadow: 1px 1px 10px rgb(27 39 94 / 40%);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;

    // -webkit-transition: margin-top 0.2s;
    .image {
        width: 100%;
        height: 165px;

        img {
            width: 100%;
            height: 165px;
        }
    }

    .desc {
        p {
            &:nth-child(1) {
                font-size: 16px;
                font-weight: 700;
                margin: 10px 10px 0 10px;
            }

            &:nth-child(2) {
                font-size: 12px;
                margin: 10px 0 0 10px;
                color: #808080;
            }

            &:nth-child(3) {
                margin: 10px 0 0 10px;
                color: #fe7062;
                font-weight: bold;
                font-size: 16px;
            }
        }

    }
}
</style>